<template>
    <section class="result-content "   element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="classroom-main">
<!--          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item class="hander" to="/index">首页</el-breadcrumb-item>
            <el-breadcrumb-item>测试结果</el-breadcrumb-item>
          </el-breadcrumb> -->
          <div class="back" @click="goBack">
            <img src="../../assets/image/md-arrow_back.svg"/>
            <span class="title" :title="paperName">{{paperName}}</span>
          </div>
          <div class="person-info">
            <span>考试时间：{{kaoshishijian}}</span>
            <span>姓名：{{xingming}}</span>
            <span>成绩：{{chengji}}分</span>
            <span>答题时间：{{datishijian}}分钟</span>
          </div>
          <div class="line"></div>
          <div class="result-all">

          <!--  <h3 class="title1">本次共答对：{{count}}题  总得分：<span style="color:#17a2b8">{{fen}}分</span></h3> -->
            <div class="result-item" v-for="(item,index) in resultList">
              <h3 class="name">{{index+1}}.({{item.educationExam.examTypeLabel}})
              <span v-html="item.title"></span> </h3>
              <div class="test-all">
                <div class="zhe"></div>
                <el-radio-group v-model="item.radio" v-show="item.examType=='1' || item.examType=='4' || item.examType=='2'">
                  <el-radio :label="index1" v-for="(child,index1) in item.testList"  :class="child.addClass" >
                    <!-- {{child.label}}.{{child.content}} -->
                    <span v-html="child.label + '.' + child.content"></span>
                  </el-radio>
                </el-radio-group>
                <span class="text" v-show="item.examType=='3' || item.examType=='5'">正确答案：{{item.testList}}</span>
                <!-- <el-checkbox-group v-model="item.radio" class="marn-radio" v-show="item.examType=='2'">
                  <el-checkbox :label="child.name" v-for="(child,index1) in item.testList" :class="child.addClass"></el-checkbox>
                </el-checkbox-group> -->
              </div>
              <span class="result-text">我的回答：{{item.answer1}}</span>
              <!-- <span class="result-text">答案：{{item.educationExam.}}</span> -->
              <span class="result-text1">解析：</span>
              <p class="p-content">{{item.educationExam.analysis}}</p>
              <div style="clear:both"></div>
            </div>
          </div>
      </div>
    </section>
</template>

<script>
import'@/assets/css/fonts/iconfont.css'
import'@/assets/css/style.less'
import $ from 'jquery'
import Cookies from 'js-cookie'


export default {
  crollToTop: true,
  props:{

  },
  data(){
    return{
      kaoshishijian:'',
      xingming:'',
      chengji:'',
      datishijian:'',
      // loading:false,
      paperName:'',
      course:true,
      index1:null,
      index2:null,
      count:null,
      arr:[],
      fen:0,
      testList:[

      ],
      resultList:[

      ],
      index:0,
      goods:true,
      radio:null,
      input:'',
      day:'',
      hour:'',
      min:'',
      timer:null,
      second:'',
      curStartTime:'',
      id:'',
    }
  },
  head() {
    return {
      title: '测试结果',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '网校，中新网校，在线学习，在线教育'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: '网校，中新网校，在线学习，在线教育'
        },
      ]
    }
  },
  computed:{

  },
  created(){
    this.id = this.$route.query.id;
    this.getData();
    console.log(this.id,99999999999)
  },
  mounted(){
      $('.el-scrollbar__wrap').animate({scrollTop: '0px'}, 0);
      $(function(){
        $('.el-radio-group .error').addClass('is-checked')
        $('.el-radio-group .error').find(".el-radio__input").addClass('is-checked')

        $('.el-radio-group .success').addClass('is-checked')
        $('.el-radio-group .success').find(".el-radio__input").addClass('is-checked')
      })
  },
  beforeDestroy() {

  },
  methods:{
    goContent(item){
      //this.$router.push("/mainAll/teacherContent")
    },
    goBack(){
      this.$router.go(-1)
    },
    getData(){
      let that = this;
      // that.loading = true;
      console.log("考试结果")
      console.log(this.id)
      this.$axios.$post("/f/getUserKaoshi?id="+this.id)
      .then(function (response) {
        console.log(response,555)
        that.kaoshishijian = response.data.kaoshiStartTime;
        that.xingming = response.data.educationUser.name;
        that.chengji = response.data.score;
        that.datishijian = response.data.datishijian;
        // that.fen = response.data.score;
        that.count = response.data.count;
        that.paperName = response.data.educationKaoshi.name;
        let list = response.data.educationUserKaoshiExamList;
        let arr = [];
        if(list.length!=0){
          list.forEach((item,i)=>{
            item.examType = item.educationExam.examType;
            item.title = item.educationExam.content;
            item.answer1 = item.userAnswer
            let a = [];
            let b = item.educationExam.educationExamAnswerList;
            b.forEach((item1,i1)=>{
              a.push(item1.answer)
            })
            item.userAnswer = a.join(",");
            let arr1 = [];
            if(item.examType=="1" || item.examType=="4"){
              let data = item.educationExam.educationExamAnswerList;
              let data1 = item.educationExam.educationExamOptionList;
              // let c = [];
              // data.forEach((item1,i1)=>{
              //   c.push(item1.answer);
              // })
              data1.forEach((item1,i1)=>{
                if(item1!=""){
                  let obj = {};
                  obj.content = item1.content;
                  obj.label = item1.label;
                  obj.addClass = "";
                  arr1.push(obj);
                }
              })
              data1.forEach((item1,i1)=>{
                data.forEach((item2,i2)=>{
                  if(item1.label==item2.answer){
                    arr1[i1].addClass="success";
                  }
                  else{
                    arr1[i1].addClass="error";
                  }
                })

              });
              // console.log(arr1,11);
              // debugger;
            }

            else if(item.examType=="3" || item.examType=="5"){
              let a = [];
              let data = item.educationExam.educationExamAnswerList;
              // console.log(99)
              // data.forEach((item1,i1)=>{
              //   a.push(item1.answer)
              // })
              // console.log(888)
              arr1 = item.userAnswer;
            }
            else if(item.examType=="2"){
              let data1 = item.userAnswer.split(",");
              let data2 = item.educationExam.educationExamAnswerList;

              let arr2 = [];
              let arr6 = [];
              data2.forEach((item1,i1)=>{
                let obj1 = {};
                obj1.name = item1.answer;
                obj1.addClass = "success";
                arr2.push(obj1);

              })
              data1.forEach((item2,i2)=>{
                let obj1 = {};
                obj1.name = item2;
                obj1.addClass = "error";
                arr6.push(obj1);
                })


               function mergeArray(arr1, arr2){
               for (var i = 0 ; i < arr1.length ; i ++ ){
                 for(var j = 0 ; j < arr2.length ; j ++ ){
                  if (arr1[i].addClass=="error" && arr1[i].name=== arr2[j].name){
                   arr1.splice(i,1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
                  }
                 }
               }
               //alert(arr1.length)
               for(var i = 0; i <arr2.length; i++){
                arr1.push(arr2[i]);
               }
               return arr1;
              }
              let arr8 = mergeArray(arr6,arr2);
              let data3 = item.educationExam.educationExamOptionList;
              //let data4 = item.educationExam.examStem.split("~~~");
              let arr3 = [];
              data3.forEach((item1,i1)=>{
                if(item1.content!=""){
                  let obj = {};
                  obj.content = item1.content;
                  obj.label = item1.label;
                  obj.addClass = "";
                  arr3.push(obj);
                }
              })
              console.log(arr3,222111);

              data3.forEach((item1,i1)=>{
                arr8.forEach((item2,i2)=>{
                  if(item2.name==item1.label){
                    arr3[i1].addClass = item2.addClass;
                  }
                })
              });

              arr1 = arr3;
            }

            item.testList = arr1;
          })
          that.resultList = list;
          console.log( that.resultList,666666666666)
        }

        // that.loading = false;

      })
      .catch(function (error) {
          // handle error
          console.log(error);
      })
    },
  }
}
</script>

<style lang="less" >
  .result-content{
    width:100%;
    float:left;
    // min-height:500px;
    height: 100%;
    overflow-y: scroll;
    .teacher-img{
      width:100%;
      display:block;
    }
    .classroom-main{
        width:100%;
        margin:0 auto;
        .back{
          width: 100%;
          // margin-top: 20px;
          // margin-bottom: 5px;
          cursor: pointer;
          text-align: center;
          height: 60px;
          line-height: 60px;
          vertical-align:middle;
          img{
            width: 30px;
            float: left;
            margin-left: 20px;
            margin-top: 15px;
          }
          .title{
            color: rgba(96, 94, 94, 100);
            font-size: 18px;
            font-family: PingFangSC-regular;
          }
        }
        .person-info{
          display: flex;
          justify-content: space-around;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          color: rgba(57, 158, 228, 100);
        }
        .line{
          width: 98%;
          margin-left: 1%;
          height: 2px;
          background-color:rgba(57, 158, 228, 100) ;
        }
        .el-breadcrumb{
            margin:30px 0;
            font-size:15px;
            padding-left:10px;
        }
        .result-all{
          width:100%;
          // padding-top:20px;
          .result-item{
            width:100%;
            padding:10px 30px;
            box-shadow: 0 0px 7px #c7cac7;
            margin-bottom:15px;
            .name{
              cursor: pointer;
              overflow: hidden;
              // white-space: nowrap;
             text-overflow: ellipsis;
              width:100%;
              line-height:30px;
              margin:10px 0;
              padding-left:10px;
              text-align:left;
              font-size:16px;
              color:#777777;
              font-weight:500;
              background:#ffffff;
            }
            .result-text1{
              line-height:25px;
              font-size:16px;
              color:#777777;
              text-align:left;
              float:left;
            }
            .p-content{
              line-height:25px;
              font-size:16px;
              color:#777777;
              text-align:left;
              width:100%;
              float:left;
            }
            .result-text{
              width:100%;
              display:block;
              line-height:30px;
              margin:10px 0;
              font-size:16px;
              color:#777777;
              text-align:left;
            }
            .test-all{
              width:100%;
              background:#f7f7f7;
              position:relative;
              .marn-radio{
                padding:0 20px;
              }
              .el-checkbox{
                width: 100%;
                margin: 0 !important;
                height: 55px;
                line-height: 55px;
              }
              .text{
                font-size:16px;
                color:#777777;
                line-height:70px;
                padding:0 20px;
              }
              .zhe{
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                z-index:9;
              }
              .el-radio-group{
                width: 100%;
                padding: 0 20px;
                .success{
                  .el-radio__inner{
                    border-color: #409EFF;
                    background: #409EFF;
                  }
                }
                .el-radio__inner::after{
                  transform:translate(-50%,-50%);
                }
                .error{
                  .el-radio__inner{
                    border-color: #f56c6c;
                    background: #f56c6c;
                  }
                }
                .el-radio{
                  color: #606266;
                  cursor: pointer;
                  margin: 0px;
                  width: 100%;
                  height: 40px;
                  text-align: left;
                  .el-radio__label{
                    line-height:40px;
                  }
                }
              }
            }
          }
          .title1{
            text-align:center;
            line-height:70px;
            width:100%;
            margin:15px 0;
            font-size:18px;
            color:#444444;
            box-shadow: 0 0px 7px #c7cac7;
          }
        }
    }
  }
</style>
